<template>
	<view class="wrap">
		<view class="titleImage"><u-image width="100%" height="500rpx" :src="goodData.goods_thumb"></u-image></view>
		<view class="name">
			<u-card full :show-head="false">
				<view  slot="body">
					<view class="goodsNameTitle">
						<u-row>
							<u-col offset="1">
								<text class="symbolNumber">¥</text>
								<text>{{ goodData.goodsNumber }}</text>
							</u-col>
						</u-row>
					</view>
					<view class="goodsNameBody">
						<u-row gutter="16">
							<u-col span="8">
								<text class="goodsName">{{ goodData.name }}</text>
							</u-col>
							<u-col span="2" offset="2"><u-icon name="heart" size="40" label="收藏" margin-top="10" labelPos="bottom"></u-icon></u-col>
						</u-row>
					</view>
				</view>
			</u-card>
			<u-card full :show-head="false">
				<view  slot="body">
					<view>
						<u-row>
							<u-col offset="0" span="2"><text style="font-weight: 700;">已选</text></u-col>
							<u-col span="4">
								<text v-show="userOrder.color">{{ userOrder.color }},{{ userOrder.size }},{{ userOrder.number }}件</text>
							</u-col>
							<u-col span="1" offset="5"><u-icon name="more-dot-fill" size="45" @click="titleImageShow = true"></u-icon></u-col>
						</u-row>
						<u-row><u-line color="#f3f2f0" margin="30rpx" /></u-row>
						<u-row>
							<u-col offset="0" span="2"><text style="font-weight: 700;">送至</text></u-col>
							<u-col span="4"><text></text></u-col>
							<u-col span="1" offset="5"><u-icon name="more-dot-fill" size="45"></u-icon></u-col>
						</u-row>
					</view>
				</view>
			</u-card>
			<u-card full :show-head="false">
				<view >
					
				</view>
			</u-card>
		</view>
		<!-- 弹出层 -->
		<u-popup v-model="titleImageShow" mode="bottom" @close="demo" closeable>
			<view style="margin-bottom: 30rpx;">
				<u-row>
					<u-col span="4"><u-image width="100%" height="300rpx" :src="goodData.goods_thumb" mode="aspectFit"></u-image></u-col>
					<u-col span="2" offset="1">
						<view style="margin-top: 80rpx;">
							<text class="symbolNumber" style="text-align: center;">¥</text>
							<text>{{ goodData.goodsNumber }}</text>
						</view>
					</u-col>
				</u-row>
			</view>
			<view  style="margin:30rpx 0;">
				<u-row style="margin-bottom: 30rpx;">
					<u-col offset="1"><text style="font-weight: 700; font-size: 35rpx;">颜色</text></u-col>
				</u-row>
			</view>
			<view  style="margin:30rpx 0;">
				<u-row>
					<u-col span="2" v-for="(item, index) in goodDataColor" :key="index">
						<u-tag :text="item.name" :type="item.type" shape="circle" :index="index" @click="clickColorTag" />
					</u-col>
				</u-row>
			</view>
			<view  style="margin:30rpx 0;">
				<u-row style="margin:30rpx 0;">
					<u-col offset="1"><text style="font-weight: 700; font-size: 35rpx;">尺码</text></u-col>
				</u-row>
			</view>
			<view>
				<u-row>
					<u-col span="2" v-for="(item, index) in goodDataSize" :key="index">
						<u-tag :text="item.name" :type="item.type" shape="circle" :index="index" @click="clickSizeTag" />
					</u-col>
				</u-row>
			</view>
			<view  style="margin:30rpx 0;">
				<u-row style="margin:30rpx 0;">
					<u-col offset="1" span="2"><text style="font-weight: 700; font-size: 35rpx;">数量</text></u-col>
					<u-col span="1" offset="6"><u-icon name="minus" @click="userOrder.number--"></u-icon></u-col>
					<u-col span="1">
						<text>{{ userOrder.number }}</text>
					</u-col>
					<u-col span="1"><u-icon name="plus" @click="userOrder.number++"></u-icon></u-col>
				</u-row>
			</view>
			<view  style="margin:30rpx 0;">
				<u-row style="margin:30rpx 0;">
					<u-col span="5" style="margin: 0 40rpx;"><u-button shape="square" type="warning">加入购物车</u-button></u-col>
					<u-col span="5"><u-button shape="square" type="error">立即购买</u-button></u-col>
				</u-row>
			</view>
		</u-popup>
		<good-footer class="goodFooter"></good-footer>
	</view>
</template>

<script>
import goodFooter from '../../components/goodFooter.vue';
export default {
	data() {
		return {
			goodsPaging: {
				goodsLimit: 10,
				goodsSkip: 0
			},
			// 商品信息
			goodData: {},
			// 弹出层控制
			titleImageShow: false,
			// 商品颜色分类
			goodDataColor: [],
			// 商品尺码分类
			goodDataSize: [],
			// 用户提交的商品数据
			userOrder: {
				number: 1,
				color: '',
				size: '',
				_id: ''
			}
		};
	},
	components: {
		goodFooter
	},

	methods: {
		// 获取商品数据方法
		getGoodImages(number, id) {
			const that = this;
			// 获取商品数据
			uniCloud
				.callFunction({
					name: 'inquireGood',
					data: { name: 'opendb-mall-goods', number: number, id: id }
				})
				.then(res => {
					res.result.data.forEach(item => {
						that.goodData = item;
					});
					that.goodData.color.forEach(item => {
						let color = {};
						color.name = item;
						color.type = 'info';
						that.goodDataColor.push(color);
					});
					that.goodData.size.forEach(item => {
						let size = {};
						size.name = item;
						size.type = 'info';
						that.goodDataSize.push(size);
					});
				});
		},
		// 实现标签点击变色功能
		clickColorTag(index) {
			this.goodDataColor.forEach(item => {
				item.type = 'info';
			});
			this.goodDataColor[index].type = 'error';
			this.userOrder.color = this.goodDataColor[index].name;
		},
		clickSizeTag(index) {
			this.goodDataSize.forEach(item => {
				item.type = 'info';
			});
			this.goodDataSize[index].type = 'error';
			this.userOrder.size = this.goodDataSize[index].name;
		},
		// 弹出层关闭赋值
		demo() {
			if (this.userOrder.size == '' || this.userOrder.color == '') {
				this.userOrder.color = '';
				this.userOrder.size = '';
			}
		}
	},
	async created() {
		await this.getGoodImages(this.goodsPaging, this.$store.state.pichGood.id);
	},
	onLoad: function(option) {
		// 获取上个页面选择的商品分类
		this.commodity = option;
		
		// 通过上个页面选择的分类获取商品数据
		// this.getGoodImages(this.goodsPaging, option._id);
	}
};
</script>

<style lang="scss" scoped>
.wrap {
	height: 100%;
}
.goodsName {
	font-size: 32rpx;
	font-weight: 700;
	color: #181715;
}
.goodsNameTitle {
	margin: 5rpx 0;
	font-size: 80rpx;
}
.symbolNumber {
	font-size: 45rpx;
	margin-right: 10rpx;
}
</style>
